<template>
  <div class="echarts-outer-wrapper flex-cloumn width-620">
    <Title title="本年税费收入趋势" time="2" timePosition="left"></Title>
    <echartCompt class="flex1" v-model="chartOption"></echartCompt>
  </div>
</template>

<script>
// import * as echarts from "echarts";
import * as echartOption from "@/components/echart-axis";
import Title from "@/components/title";

export default {
  name: "bnsfsrqs",
  components: {
    Title,
  },
  data() {
    return {
      prevDate: null,
      yearDate: null,
      EchartData: { tqList: [], bnList: [] },
    };
  },
  created() {
    let date = "";
    let month = new Date().getMonth() + 1;
    let year = new Date().getFullYear();
    date = year + "-" + month;
    this.prevDate = date;
    this.yearDate = year;
  },
  mounted() {
    // this.myChart = echarts.init(this.$refs.echart);
    this.ajax({
      url: "/dpzsSrcxService/bnsfsrqsQuery",
      method: "post",
      data: {
        param: {
          tjnd: this.yearDate,
        },
      },
    }).then((res) => {
      res = res.data;
      if (res.rtnCode !== "200") {
        this.$message.error(res.rtnMsg);
        return;
      }
      this.EchartData = res.data;
      this.rightChartData01();
    });
  },
  computed: {
    chartOption() {
      var xdata = this.EchartData.tqList.map((item) => item.yf);
      let bnSssr = [];
      let bnFssr = [];
      let bnShjjsr = [];
      let tqSssr = [];
      let tqFssr = [];
      let tqShjjsr = [];
      this.EchartData.tqList.map((item) => {
        tqSssr.push({
          type: "同期",
          value: item.sssr,
        });
        tqFssr.push({
          type: "同期",
          value: item.fssr,
        });
        tqShjjsr.push({
          type: "同期",
          value: item.sbjjsr,
        });
      });
      this.EchartData.bnList.map((item) => {
        bnSssr.push({
          type: "本年",
          value: item.sssr,
        });
        bnFssr.push({
          type: "本年",
          value: item.fssr,
        });
        bnShjjsr.push({
          type: "本年",
          value: item.sbjjsr,
        });
      });
      var legendName = ["税收收入", "非税收入", "社会保险基金"];
      let barWidth = 8;
      var series = [
        {
          name: "税收收入",
          type: "bar",
          stack: "overlap2", //堆叠效果(字符需要统一)
          barWidth,
          itemStyle: {
            normal: {
              color: "#FFCB5B",
            },
          },
          data: bnSssr,
        },
        {
          name: "非税收入",
          type: "bar",
          stack: "overlap2", //堆叠效果(字符需要统一)
          barWidth,
          itemStyle: {
            normal: {
              color: "#79FFE7",
            },
          },
          data: bnFssr,
        },
        {
          name: "社会保险基金",
          type: "bar",
          stack: "overlap2", //堆叠效果(字符需要统一)
          barWidth,
          itemStyle: {
            normal: {
              color: "#FF5D5D",
            },
          },
          data: bnShjjsr,
        },
        {
          name: "税收收入",
          type: "bar",
          stack: "overlap", //堆叠效果(字符需要统一)
          barWidth,
          itemStyle: {
            normal: {
              color: "#FFCB5B",
              opacity: 0.5,
            },
          },
          data: tqSssr,
        },
        {
          name: "非税收入",
          type: "bar",
          stack: "overlap", //堆叠效果(字符需要统一)
          barWidth,
          itemStyle: {
            normal: {
              color: "#79FFE7",
              opacity: 0.5,
            },
          },
          data: tqFssr,
        },
        {
          name: "社会保险基金",
          type: "bar",
          stack: "overlap", //堆叠效果(字符需要统一)
          barWidth,
          itemStyle: {
            normal: {
              color: "#FF5D5D",
              opacity: 0.5,
            },
          },
          data: tqShjjsr,
        },
      ];
      let option = {
        grid: echartOption.echartGrid({
          top: 80,
          right: 60,
        }),
        tooltip: echartOption.tooltip({
          formatter: function (params) {
            // console.log(params);
            let toyear = new Date().getFullYear();
            let tongqi = [
              `<div style="color:${echartOption.tooltipTextColor}">${
                toyear - 1
              }年${params[0].axisValueLabel}</div>`,
            ];
            let bennian = [
              `<div style="color:${echartOption.tooltipTextColor}">${params[0].axisValueLabel}-本期</div>`,
            ];
            for (let item of params) {
              let dom = `<div style="color:${echartOption.tooltipTextColor}"><span style="display:inline-block;width:12px;height:12px;margin-right:6px;background-color:${item.color};border-radius:16px"></span>${item.seriesName}:${item.value}</div>`;
              if (item.data.type == "同期") {
                tongqi.push(dom);
              }
              if (item.data.type == "本年") {
                bennian.push(dom);
              }
            }
            if (bennian.length == 1) {
              bennian = [];
            }
            return [...bennian, ...tongqi].join("");
          },
        }),
        legend: echartOption.echartLegend(legendName, 12),
        xAxis: {
          data: xdata,
          axisTick: echartOption.xAxisTick,
          axisLine: echartOption.xAxisline,
          axisLabel: echartOption.xAxisLabel(),
        },
        yAxis: {
          ...echartOption.yAxisDw("亿元"),
          axisTick: echartOption.yAxisTick,
          axisLine: echartOption.yAxisline,
          splitLine: echartOption.splitLine,
          axisLabel: echartOption.yAxisLabel,
        },
        series: series,
      };
      return option;
    },
  },
  methods: {
    rightChartData01() {
      // this.myChart.setOption(option);
    },
  },
};
</script>

<style scoped lang="scss">
.echarts-outer-wrapper {
  width: 616px;
  height: 476px;
}
</style>
